<template>
	<view class="bianji">
		<input class="bianji_input_a" placeholder="输入订单标题" type="text" style="background-color: #fff;;height: 80rpx;" />

		<ul class="bianji_ul">
			<li class="bianji_li">
				<view>
					<text>关联客户</text>
					<text style="color: red;">*</text>
				</view>

				<view>
					<text>点击选择</text>
					<text>&gt;</text>
				</view>
			</li>

			<li class="bianji_li">
				<view>
					<text>关联商机</text>
				</view>

				<view>
					<text>点击选择</text>
					<text>&gt;</text>
				</view>
			</li>

			<li class="bianji_li">
				<view>
					<text>关联产品</text>
					<text style="color: red;">*</text>
				</view>

				<view>
					<text>已添加产品记录 10条</text>
					<text>&gt;</text>
				</view>
			</li>

			<li class="bianji_li">
				<view>
					<text>订单总金额(元)</text>
					<text style="color: red;">*</text>
				</view>

				<view>
					<text>10,000.00</text>

				</view>
			</li>

			<li class="bianji_li">
				<view>
					<text>签单日期</text>
					<text style="color: red;">*</text>
				</view>

				<view>
					<text>点击选择</text>
					<text>&gt;</text>
				</view>
			</li>

			<li class="bianji_li">
				<view>
					<text>执行开始日期</text>
				</view>

				<view>
					<text>点击选择</text>
					<text>&gt;</text>
				</view>
			</li>

			<li class="bianji_li">
				<view>
					<text>执行结束日期</text>
				</view>

				<view>
					<text>点击选择</text>
					<text>&gt;</text>
				</view>
			</li>

			<li class="bianji_li">
				<view>
					<text>客户签约人</text>
				</view>

				<view>
					<text>点击填写</text>

				</view>
			</li>

			<li class="bianji_li">
				<view>
					<text>我方签约人</text>
				</view>

				<view>
					<text>点击填写</text>

				</view>
			</li>

			<li class="bianji_li">
				<view>
					<text>付款方式</text>
				</view>

				<view>
					<text>点击选择</text>
					<text>&gt;</text>
				</view>
			</li>

			<li class="bianji_li">
				<view>
					<text>归属人员</text>
					<text style="color: red;">*</text>
				</view>

				<view>
					<img src="/static/officeImgs/officeshenpi2.png" alt="" style="width: 56rpx; height: 56rpx;" />
					<text>赵小刚</text>
					<text>&gt;</text>
				</view>
			</li>
		</ul>

		<view class="beizhu">
			<view style="margin-left: 10rpx;">备注信息</view>
			<view style="color: rgb(227, 215, 208);margin-top: 20rpx; margin-left: 10rpx;">
				<input placeholder="请填写备注信息" value="" />
			</view>
		</view>

		<view class="renyuan" style="padding: 20rpx;background-color: #fff;margin-top: 30rpx;">
			<view>提醒谁看</view>
			<view class="renyuan_li_one">√</view>
			<view class="renyuan_li_two">√</view>
			<view class="renyuan_li_three">√</view>
			<view class="renyuan_li_four">√</view>
			<ul class="renyuan_ul">
				<li class="renyuan_li">
					<img class="renyuan_li_img" src="/static/officeImgs/officeshenpi2.png" alt="" />
					<view>赵小刚</view>
				</li>

				<li class="renyuan_li">
					<img class="renyuan_li_img" src="/static/officeImgs/officeshenpi2.png" alt="" />
					<view>周小明</view>
				</li>

				<li class="renyuan_li">
					<img class="renyuan_li_img" src="/static/officeImgs/officeshenpi2.png" alt="" />
					<view>郭小涛</view>
				</li>

				<li class="renyuan_li">
					<img class="renyuan_li_img" src="/static/officeImgs/officeshenpi2.png" alt="" />
					<view>张小伟</view>
				</li>

				<li class="renyuan_li">
					<img class="renyuan_li_img" src="/static/officeImgs/office_shenpi_dingdan_ok.png" alt="" />
					<view>更多</view>
				</li>
			</ul>
		</view>

		<view style="margin-top: 20rpx;margin-left: 20rpx;font-size: 24rpx;color: rgb(156, 158, 161);">
			注:审批完成后，将自动通知到所选人员。</view>

		<view style="margin-top: 40rpx;margin-left: 20rpx;font-size: 24rpx;color: rgb(156, 158, 161);">
			跟进任务</view>

		<view class="genjin">
			<ul class="genjin_ul">
				<li class="genjin_li">
					<view>创建下次跟进任务</view>
					<view></view>
				</li>
			</ul>
		</view>

	</view>
</template>

<script setup>

</script>

<style scoped lang="scss">
	.bianji {
		padding: 20rpx;
		font-size: 28rpx;
		background-color: rgb(249, 249, 249);

		.bianji_input_a {
			padding-left: 20rpx;
		}

		.bianji_ul {
			margin-top: 40rpx;

			.bianji_li {
				background-color: #fff;
				padding: 20rpx;
				height: 80rpx;
				border: 2rpx solid #ccc;
				display: flex;
				justify-content: space-between;
				align-items: center;
			}

		}

		.beizhu {
			margin-top: 30rpx;
			padding: 20rpx;
			height: 300rpx;
			background-color: #fff;
		}

		.renyuan {
			padding: 20rpx;
			margin-top: 100rpx;
			background-color: #fff;
			position: relative;

			.renyuan_li_one {
				width: 30rpx;
				height: 30rpx;
				line-height: 30rpx;
				color: #fff;
				background-color: rgb(0, 121, 254);
				border-radius: 50%;
				text-align: center;
				position: absolute;
				left: 100rpx;
				top: 75rpx;
			}

			.renyuan_li_two {
				width: 30rpx;
				height: 30rpx;
				line-height: 30rpx;
				color: #fff;
				background-color: rgb(0, 121, 254);
				border-radius: 50%;
				text-align: center;
				position: absolute;
				left: 235rpx;
				top: 75rpx;
			}

			.renyuan_li_three {
				width: 30rpx;
				height: 30rpx;
				line-height: 30rpx;
				color: #fff;
				background-color: rgb(0, 121, 254);
				border-radius: 50%;
				text-align: center;
				position: absolute;
				left: 370rpx;
				top: 75rpx;
			}

			.renyuan_li_four {
				width: 30rpx;
				height: 30rpx;
				line-height: 30rpx;
				color: #fff;
				background-color: rgb(0, 121, 254);
				border-radius: 50%;
				text-align: center;
				position: absolute;
				left: 510rpx;
				top: 75rpx;
			}

			.renyuan_ul {
				margin-top: 20rpx;
				display: flex;
				justify-content: space-around;

				.renyuan_li {
					text-align: center;

					.renyuan_li_img {
						width: 70rpx;
						height: 70rpx;
					}
				}
			}
		}
	}
</style>